<template>
  <div id="userCenterIndex">
    <h1 class="con-right-title">
      个人中心
    </h1>
    <div class="card-box">
      <!--左侧-个人资料-->
      <el-card class="userInfo" shadow="hover">
        <div slot="header" class="clearfix">
          <span>个人资料</span>
        </div>
        <div class="head-box">
          <el-avatar :size="120" :src="ruleForm.avatar"></el-avatar>
        </div>
        <div class="form-box">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="登录名称：">
              {{ ruleForm.loginName }}
            </el-form-item>
            <el-form-item label="手机号码：">
              {{ ruleForm.phonenumber }}
            </el-form-item>
            <el-form-item label="所属部门：">
              {{ ruleForm.dept.deptName }}
            </el-form-item>
            <el-form-item label="邮箱地址：">
              {{ ruleForm.email }}
            </el-form-item>
            <el-form-item label="创建时间：">
              {{ ruleForm.createTime }}
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!--右侧-基本资料-->
      <el-card class="baseInfo" shadow="hover">
        <div slot="header" class="clearfix">
          <span>基本资料</span>
        </div>
        <div class="form-box">
          <el-form
            ref="baseForm"
            :model="ruleForm"
            label-width="80px"
            class="demo-baseForm"
          >
            <el-form-item label="用户名称：" prop="userName">
              <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="tel">
              <el-input v-model="ruleForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio
                  v-for="item in sexList"
                  :key="item.dictValue"
                  :label="item.dictValue"
                >
                  {{ item.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="sub-button">
            <el-button type="success" @click="clearTag('default')">
              关闭
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { clearTagMixins } from '@/mixins/clearTag'
export default {
  name: 'userCenterIndex',
  msg: '个人中心',
  mixins: [clearTagMixins],
  data() {
    return {
      ruleForm: {
        dept: {}
      },
      sexList: [] // 性别列表
    }
  },
  computed: {
    uerInfo() {
      return this.$store.state.user
    }
  },
  mounted() {
    this.loadingAccount()
    this.getSexList()
  },
  methods: {
    /* 获取性别列表 */
    async getSexList() {
      this.sexList = await sysNormalDisable('sys_user_sex')
    },
    loadingAccount() {
      this.ruleForm = { ...this.uerInfo }
    }
  }
}
</script>

<style lang="less">
#userCenterIndex {
  .card-box {
    display: flex;
    justify-content: left;

    .el-card__header {
      padding: 12px 15px;
      background: #f0f3f4;
      border-bottom: 1px solid #eee;
    }

    .userInfo {
      width: 325px;
      flex: none;
      margin: 0 10px;

      .head-box {
        text-align: center;
        margin-bottom: 5px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .el-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }

      .el-form-item__label {
        color: #8b91a1;
      }
    }

    .baseInfo {
      position: relative;
      flex: auto;
      margin-right: 10px;
    }
    .el-card__body {
      height: calc(100% - 87px);
    }
    .sub-button {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
}
</style>
